<template>
  <div>
    <!-- 上方搜索框 -->
    <div>
      <el-input
        placeholder="请输入用户名"
        v-model="searchIfom"
        style="font-size: 16px"
      >
        <el-button
          type="primary"
          slot="append"
          icon="el-icon-search"
          @click="searchUser"
        ></el-button>
      </el-input>
    </div>
    <!-- 下方搜索的用户卡片 -->
    <el-card class="elCard">
      <div class="box_head">
        <span style="line-height: 14px; color: gray"
          >一共搜索到{{ searchSum }}条数据</span
        >
      </div>
      <div class="box_main">
        <!-- 搜索出来的用户 -->
        <div class="box_users" v-for="item in addList" :key="item.id" >
          <!-- 头像 -->
          <el-avatar
            shape="square"
            :size="50"
            src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
            class="box_avatar"
          ></el-avatar>
          <!-- 用户名 -->
          <span class="box_span">{{ item.username }}</span>
          <!-- 按钮 -->
          <el-button
            icon="el-icon-plus"
            type="primary"
            size="mini"
            plain
            class="box_button"
            @click="addDialog(item.id)"
            >添加</el-button
          >
          <!-- 添加好友请求对话框 -->
          <el-dialog
            title="请输入验证信息"
            :visible.sync="addDialogVisible"
            width="40%"
          >
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="addTextarea"
              maxlength="100"
              show-word-limit
            >
            </el-input>
            <span slot="footer" class="dialog-footer">
              <el-button @click="addDialogCancel">取 消</el-button>
              <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <!-- 结束 -->
        <el-button
          type="info"
          plain
          disabled
          icon="el-icon-info"
          style="width: 520px; height: 14px; padding-top: 0"
          >没有更多了</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "AddUser",
  data() {
    return {
      searchIfom: "t",
      searchSum: 0,
      addList: [],
      friendId:'',
      addDialogVisible: false,
      addTextarea: "",
    };
  },
  methods: {
    addDialog(id){
      this.friendId=id
      this.addTextarea = "";
      this.addDialogVisible = true;
    },
    addDialogCancel() {
      this.addDialogVisible = false;
      this.addTextarea = "";
    },
    async searchUser() {
      const { data: res } = await this.$http.get(
        `search?searchIfom=${this.searchIfom}`
      );
      if (res.code != 200) return this.$message.error(res.msg);
      this.searchSum = res.data.length;
      this.addList = res.data;
      this.$message.success(res.msg);
    },
    async addUser() {
      const { data: res } = await this.$http.post('addUser',{id:window.sessionStorage.getItem('ID'),friendId:this.friendId,verifyInfo:this.addTextarea});
      // console.log(res);
      if (res.code != 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.addDialogVisible = false;
    },
  },
};
</script>

<style  scoped>
.elCard {
  width: 560px;
  height: auto;
  margin-top: 10px;
}
.box_head {
  margin: 0;
  padding: 0;
  width: 520px;
  height: 30px;
  border-bottom: 1px solid gray;
}
.box_main {
  height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}
.box_users {
  width: 500px;
  height: 50px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: block;
  margin: 10px 0;
  padding: 10px 10px;
}
.box_avatar {
  display: inline-block;
  float: left;
}
.box_span {
  font-size: 18px;
  padding-left: 20px;
  display: inline-block;
  float: left;
  line-height: 50px;
}
.box_button {
  float: right;
  line-height: 25px;
  margin-top: 5px;
  margin-right: 10px;
}
</style>